<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <small>
            <span render-html="createTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <input type="hidden" name="author.id" render-value="author.id">
                <input type="hidden" name="id" render-value="id">
                <a render-key="author.id" render-fun="handleUser"><img  class="rounded-circle" render-src="author.headImgUrl"></a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span><br>
                    <button class="btn" id="followBtn" render-value="author.id">关注</button>
                    <button class="btn" id="addFriend" render-value="author.id">加好友</button><br>
                    <span>0</span>篇游记
                    <span>0</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content"></div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn" > </i>
        </div>
        <div  class="p-2  flex-fill"><i class="fa fa-star"  id="collectBtn"> </i>
        </div>
    </div>
</div>
<script>
$(function () {
    //当前好友关注
    $("#followBtn").click(function () {
        if (getUser()) {
            var attentionId=$(this).val();
            console.log(attentionId);
            $.post("/users/attention",{attentionId:attentionId},function (data) {
                $(document).dialog({
                    type : "notice",
                    infoText: data.obj,
                    autoClose: 1500,
                    position: "bottom"
                });
            })
        }else{
           location.href="/login.html";

        }
    });
    //拿到当前游记的id
    var id = getParams().id;
    //安全检查机制(这里不做)
    //设置当前点击添加次数只能为一次
    var add;
    //发送ajax请求获取当前游记的信息
    $.get("/travels/"+id, function (data) {
        console.log(data);
        $(".travels").renderValues(data,{
            handleUser: function (ele, val) {
                ele.href = "/userProfiles.html?id=" + val;
            }
        });
        add=1;
    });
    //添加好友功能
    //设置点击事件

    $("#addFriend").click(function () {
        //判断当前用户是否登录
        if (!getUser()) {
            location.href="/login.html"
        }
        var addId=$("input[name='author.id']").val();
        if (add) {
            $.post("/users/addFriend",{"friend.id":addId},function (data) {
                console.log(data.msg);
                add=0;
                if (!data.success) {
                    $(document).dialog({
                        type : "notice",
                        infoText: data.msg,
                        autoClose: 1500,
                        position: "bottom"
                    });
                }else{
                    $(document).dialog({
                        type : "notice",
                        infoText: "添加成功",
                        autoClose: 1500,
                        position: "bottom"
                    });
                }
            },"json");
        }
    });
    //页面加载完毕后进行收藏回显
    var state;
    //点击收藏功能
    //style="color: #DFE823"
    //设置当前状态
    var travelId=$("input[name='id']").val();
    //页面加载完毕后进行收藏回显
    $.get("/users/enshrine/relation",{"travelId":getParams().id},function (data) {
       state= data.success;
        console.log(state);
        if (!state) {
            $("#collectBtn").css("color","#DFE823");
        }
    },"json");
    $("#collectBtn").click(function () {
            if(state){
                $("#collectBtn").css("color","#DFE823");
                state=false;
            }else{
                $("#collectBtn").css("color","");
                state=true;
        }
        $.post("/users/enshrine",{"travelId":$("input[name='id']").val()},function (data) {
            if (data.obj == "不能收藏自己") {
                $("#collectBtn").css("color","");
            }
                $(document).dialog({
                    type : "notice",
                    infoText: data.obj,
                    autoClose: 1500,
                    position: "bottom"
                });
        },"json");
    });
    //页面加载完毕后进行点赞回显
    var likeState;
    //点赞功能
    //style="color: #DFE823"
    //设置当前状态
    //页面加载完毕后进行点赞回显
    $.get("/users/like/relation",{"travelId":getParams().id},function (data) {
        likeState= data.success;
        console.log(likeState);
        if (!likeState) {
            $("#likeBtn").css("color","#DFE823");
        }
    },"json");
    $("#likeBtn").click(function () {
        if(likeState){
            $("#likeBtn").css("color","#DFE823");
            likeState=false;
        }else{
            $("#likeBtn").css("color","");
            likeState=true;
        }
        $.post("/users/like",{"travelId":$("input[name='id']").val()},function (data) {
            $(document).dialog({
                type : "notice",
                infoText: data.obj,
                autoClose: 1500,
                position: "bottom"
            });
        },"json");
    })

    $("#commentBtn").click(function () {
        console.log(id);
        location.href="/comment/strategyComment.html";
    });
});

</script>
</body>
</html>